coverimage.js ➔ CoverImage - Code Metrics - Inspection of "1.0.0" - thisislawatts/coverimage - Measure and Improve Code Quality continuously with Scrutinizer

Completed

Branch — master (ed2295)

by LA

created 2017-03-10 09:26 UTC

coverimage.js ➔ CoverImage C

↳ Parent: Project

Complexity

Conditions	9
Paths	44

Size

Total Lines

Duplication

Lines	92
Ratio	100 %

Importance

Changes	2
Bugs	0	Features	0

Metric	Value
cc	9
c	2
b	0
f	0
nc	44
nop	2
dl	92
loc	92
rs	5.1048

How to fix Long Method

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

var elementResizeDetectorMaker = require('element-resize-detector');

var CoverImage = function () {
	function CoverImage(el, cb) {
		_classCallCheck(this, CoverImage);

		var _this = this;

		_this.$el = el ? el : window;
		_this.$img = _this.getElementForSizing();
		_this.disableOnMobile = _this.$el.dataset['cover-image-mobile'] === 'false';
		_this.cb = cb || function () {
			//DEBUG console.log("Default callback");
		};

		_this.positioning = {
			x: 0.5,
			y: 0.5
		};
		_this.options = {
			parallax: _this.$el.dataset.coverImageParallax === 'true'
		};

		if (!_this.$img) {
			console.log('Error:', 'no image found', _this.$img);
			return;
		}

		_this.imageWidth = _this.$img.width;
		_this.imageHeight = _this.$img.height;

		// If the image doesn't have harcoded width|height
		// attributes then load the image to calculate
		// the dimensions
		if (!_this.imageWidth || !_this.imageHeight) {
			console.log('No dimensions found. Generating image:', _this.$img.attr('src'));
			_this.img = new Image();
			_this.img.src = _this.$img.attr('src');

			_this.imageWidth = _this.img.width;
			_this.imageHeight = _this.img.height;
		}

		if (_this.disableOnMobile && window.innerWidth < 480) {
			return;
		}

		_this.elementDimensions = {
			height: _this.$el.clientHeight,
			width: _this.$el.clientWidth
		};

		_this.$el.style = '\n\t\t\toverflow : hidden;\n\t\t\tposition : relative;\n\t\t';

		if (!_this.$img) {
			// TODO: Implement load
			setTimeout(function () {
				new CoverImage(_this.$el);
			}, 1000);
		} else {
			_this.resizeImage();
		}

		_this.$img.addEventListener('load', function () {
			_this.resizeImage();
		}, false);

		_this.$el.addEventListener('transitionend', function () {
			_this.resizeImage();
		}, false);

		var erd = elementResizeDetectorMaker({
			strategy: 'scroll'
		});

		erd.listenTo(_this.$el, function () {
			_this.resizeImage();
		});

		_this.$el.addEventListener('animationend', function () {
			_this.resizeImage();
		}, false);

		window.addEventListener('resize', function () {
			_this.resizeImage();
		}, true);

		window.addEventListener('ci.resize', function () {
			_this.resizeImage();
		}, true);

		if (_this.options.parallax) {
			_this.draw();
		}
	}

	/**
  * Parallax FX
  *
  */


	_createClass(CoverImage, [{
		key: 'draw',
		value: function draw() {
			var _this = this;
			var friction = 0.5;
			var imageOffsetX = document.body.scrollTop * friction;
			var imageOffsetY = document.body.scrollTop * friction;
			var maximumMovementY = (_this.imageDimensions.height - _this.elementDimensions.height) * _this.positioning.y;
			var maximumMovementX = (_this.imageDimensions.width - _this.elementDimensions.width) * _this.positioning.x;

			if (maximumMovementX > 0) {
				if (imageOffsetX < maximumMovementX) {
					// console.log('New position:', maximumMovementX - imageOffsetX);
					_this.$img.css({
						'transform': 'translateX(' + (maximumMovementX - imageOffsetX) + 'px)'
					});
				}
			} else {
				if (imageOffsetY < maximumMovementY) {
					_this.$img.css('transform', 'translateY(' + (maximumMovementY - imageOffsetY) + 'px)');
				}
			}

			window.requestAnimationFrame(function () {
				_this.draw();
			});
		}

		/**
   *
   * @return DOM Element
   */

	}, {
		key: 'getElementForSizing',
		value: function getElementForSizing() {
			var _this = this;
			var selector = _this.$el.dataset['coverImageEl'];

			if (selector) {

				console.log('Element selector Present', _this.$el.find(selector));

				return _this.$el.find(selector) ? _this.$el.find(selector) : _this.$el.find('img');
			}

			return _this.$el.querySelector('img');
		}
	}, {
		key: 'resizeImage',
		value: function resizeImage() {
			var _this = this;
			var elementWidth = _this.$el.clientWidth;
			var elementHeight = _this.$el.clientHeight;
			var dimensions = _this.coverDimensions(_this.imageWidth, _this.imageHeight, elementWidth, elementHeight);

			_this.imageDimensions = dimensions;

			if (isNaN(dimensions.width)) {
				console.log('Failed to calculate image sizes.');
			}

			_this.setImageSize();
		}
	}, {
		key: 'setImageSize',
		value: function setImageSize() {
			var _this = this;

			_this.$img.width = _this.imageDimensions.width;
			_this.$img.height = _this.imageDimensions.height;

			var transform = _this.getTransform((_this.$el.clientWidth - _this.imageDimensions.width) * _this.positioning.y, (_this.$el.clientHeight - _this.imageDimensions.height) * _this.positioning.x);

			_this.$img.style = '\n\t\t\tposition: absolute;\n\t\t\twidth: ' + _this.imageDimensions.width + ';\n\t\t\theight: ' + _this.imageDimensions.height + ';\n\t\t\ttransform: ' + transform + ';\n\t\t\tmax-width: none;\n\t\t';

			_this.$img.classList.add('ci--sized');
			_this.cb();
		}
	}, {
		key: 'getTransform',
		value: function getTransform(x, y) {
			return 'translate3d(' + x + 'px,' + y + 'px,0)';
		}
	}, {
		key: 'coverDimensions',
		value: function coverDimensions(child_w, child_h, container_w, container_h) {
			var scale_factor = this.max(container_w / child_w, container_h / child_h);

			return {
				width: Math.ceil(child_w * scale_factor),
				height: Math.ceil(child_h * scale_factor)
			};
		}
	}, {
		key: 'containDimensions',
		value: function containDimensions(child_w, child_h, container_w, container_h) {
			var scale_factor = this.min(container_w / child_w, container_h / child_h);

			return {
				width: child_w * scale_factor,
				height: child_h * scale_factor
			};
		}
	}, {
		key: 'min',
		value: function min(a, b) {
			return a > b ? b : a;
		}
	}, {
		key: 'max',
		value: function max(a, b) {
			return a > b ? a : b;
		}
	}]);

	return CoverImage;
}();

var elems = document.body.querySelectorAll('[data-cover-image]');

elems.forEach(function (el) {
	new CoverImage(el);
});
//# sourceMappingURL=coverimage.js.map

1			var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable \|\| false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
2
3			function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
4
5			var elementResizeDetectorMaker = require('element-resize-detector');
6
7			var CoverImage = function () {
8			function CoverImage(el, cb) {
9			_classCallCheck(this, CoverImage);
10
11			var _this = this;
12
13			_this.$el = el ? el : window;
14			_this.$img = _this.getElementForSizing();
15			_this.disableOnMobile = _this.$el.dataset['cover-image-mobile'] === 'false';
16			_this.cb = cb \|\| function () {
17			//DEBUG console.log("Default callback");
18			};
19
20			_this.positioning = {
21			x: 0.5,
22			y: 0.5
23			};
24			_this.options = {
25			parallax: _this.$el.dataset.coverImageParallax === 'true'
26			};
27
28			if (!_this.$img) {
29			console.log('Error:', 'no image found', _this.$img);
30			return;
31			}
32
33			_this.imageWidth = _this.$img.width;
34			_this.imageHeight = _this.$img.height;
35
36			// If the image doesn't have harcoded width\|height
37			// attributes then load the image to calculate
38			// the dimensions
39			if (!_this.imageWidth \|\| !_this.imageHeight) {
40			console.log('No dimensions found. Generating image:', _this.$img.attr('src'));
41			_this.img = new Image();
42			_this.img.src = _this.$img.attr('src');
43
44			_this.imageWidth = _this.img.width;
45			_this.imageHeight = _this.img.height;
46			}
47
48			if (_this.disableOnMobile && window.innerWidth < 480) {
49			return;
50			}
51
52			_this.elementDimensions = {
53			height: _this.$el.clientHeight,
54			width: _this.$el.clientWidth
55			};
56
57			_this.$el.style = '\n\t\t\toverflow : hidden;\n\t\t\tposition : relative;\n\t\t';
58
59			if (!_this.$img) {
60			// TODO: Implement load
61			setTimeout(function () {
62			new CoverImage(_this.$el);
63			}, 1000);
64			} else {
65			_this.resizeImage();
66			}
67
68			_this.$img.addEventListener('load', function () {
69			_this.resizeImage();
70			}, false);
71
72			_this.$el.addEventListener('transitionend', function () {
73			_this.resizeImage();
74			}, false);
75
76			var erd = elementResizeDetectorMaker({
77			strategy: 'scroll'
78			});
79
80			erd.listenTo(_this.$el, function () {
81			_this.resizeImage();
82			});
83
84			_this.$el.addEventListener('animationend', function () {
85			_this.resizeImage();
86			}, false);
87
88			window.addEventListener('resize', function () {
89			_this.resizeImage();
90			}, true);
91
92			window.addEventListener('ci.resize', function () {
93			_this.resizeImage();
94			}, true);
95
96			if (_this.options.parallax) {
97			_this.draw();
98			}
99			}
100
101			/**
102			* Parallax FX
103			*
104			*/
105
106
107			_createClass(CoverImage, [{
108			key: 'draw',
109			value: function draw() {
110			var _this = this;
111			var friction = 0.5;
112			var imageOffsetX = document.body.scrollTop * friction;
113			var imageOffsetY = document.body.scrollTop * friction;
114			var maximumMovementY = (_this.imageDimensions.height - _this.elementDimensions.height) * _this.positioning.y;
115			var maximumMovementX = (_this.imageDimensions.width - _this.elementDimensions.width) * _this.positioning.x;
116
117			if (maximumMovementX > 0) {
118			if (imageOffsetX < maximumMovementX) {
119			// console.log('New position:', maximumMovementX - imageOffsetX);
120			_this.$img.css({
121			'transform': 'translateX(' + (maximumMovementX - imageOffsetX) + 'px)'
122			});
123			}
124			} else {
125			if (imageOffsetY < maximumMovementY) {
126			_this.$img.css('transform', 'translateY(' + (maximumMovementY - imageOffsetY) + 'px)');
127			}
128			}
129
130			window.requestAnimationFrame(function () {
131			_this.draw();
132			});
133			}
134
135			/**
136			*
137			* @return DOM Element
138			*/
139
140			}, {
141			key: 'getElementForSizing',
142			value: function getElementForSizing() {
143			var _this = this;
144			var selector = _this.$el.dataset['coverImageEl'];
145
146			if (selector) {
147
148			console.log('Element selector Present', _this.$el.find(selector));
149
150			return _this.$el.find(selector) ? _this.$el.find(selector) : _this.$el.find('img');
151			}
152
153			return _this.$el.querySelector('img');
154			}
155			}, {
156			key: 'resizeImage',
157			value: function resizeImage() {
158			var _this = this;
159			var elementWidth = _this.$el.clientWidth;
160			var elementHeight = _this.$el.clientHeight;
161			var dimensions = _this.coverDimensions(_this.imageWidth, _this.imageHeight, elementWidth, elementHeight);
162
163			_this.imageDimensions = dimensions;
164
165			if (isNaN(dimensions.width)) {
166			console.log('Failed to calculate image sizes.');
167			}
168
169			_this.setImageSize();
170			}
171			}, {
172			key: 'setImageSize',
173			value: function setImageSize() {
174			var _this = this;
175
176			_this.$img.width = _this.imageDimensions.width;
177			_this.$img.height = _this.imageDimensions.height;
178
179			var transform = _this.getTransform((_this.$el.clientWidth - _this.imageDimensions.width) * _this.positioning.y, (_this.$el.clientHeight - _this.imageDimensions.height) * _this.positioning.x);
180
181			_this.$img.style = '\n\t\t\tposition: absolute;\n\t\t\twidth: ' + _this.imageDimensions.width + ';\n\t\t\theight: ' + _this.imageDimensions.height + ';\n\t\t\ttransform: ' + transform + ';\n\t\t\tmax-width: none;\n\t\t';
182
183			_this.$img.classList.add('ci--sized');
184			_this.cb();
185			}
186			}, {
187			key: 'getTransform',
188			value: function getTransform(x, y) {
189			return 'translate3d(' + x + 'px,' + y + 'px,0)';
190			}
191			}, {
192			key: 'coverDimensions',
193			value: function coverDimensions(child_w, child_h, container_w, container_h) {
194			var scale_factor = this.max(container_w / child_w, container_h / child_h);
195
196			return {
197			width: Math.ceil(child_w * scale_factor),
198			height: Math.ceil(child_h * scale_factor)
199			};
200			}
201			}, {
202			key: 'containDimensions',
203			value: function containDimensions(child_w, child_h, container_w, container_h) {
204			var scale_factor = this.min(container_w / child_w, container_h / child_h);
205
206			return {
207			width: child_w * scale_factor,
208			height: child_h * scale_factor
209			};
210			}
211			}, {
212			key: 'min',
213			value: function min(a, b) {
214			return a > b ? b : a;
215			}
216			}, {
217			key: 'max',
218			value: function max(a, b) {
219			return a > b ? a : b;
220			}
221			}]);
222
223			return CoverImage;
224			}();
225
226			var elems = document.body.querySelectorAll('[data-cover-image]');
227
228			elems.forEach(function (el) {
229			new CoverImage(el);
230			});
231			//# sourceMappingURL=coverimage.js.map

thisislawatts / coverimage

Branch — master (ed2295)

coverimage.js ➔ CoverImage C

Complexity

Size

Duplication

Importance

How to fix Long Method

Long Method

Duplication Side-by-Side

Filter issues like